import React, { Component } from 'react'
import { Link, withRouter } from 'react-router-dom'
import { Modal, Badge } from 'antd'
import { connect } from 'react-redux'

import './index.less'
import { getReqData } from '../../utils'
import { formateDate } from '../../utils/dateUtils'
import {
  reqWeather,
  reqGetMessageBoardUnreadCount,
  reqGetAskUnreadCount,
} from '../../api'
import { LinkButton } from '../link-button'
import { logout } from '../../redux/actions'

const { confirm } = Modal

class Index extends Component {
  constructor(props) {
    super(props)

    this.state = {
      currentTime: formateDate(Date.now()),
      dayPictureUrl: '',
      weather: '',
      count: 0,
      username: 'default name',
    }

    this.time = null
  }

  /**
   * 每隔一秒 获取一次当前时间
   */
  getTime = () => {
    this.time = setInterval(() => {
      this.setState({ currentTime: formateDate(Date.now()) })
    }, 1000)
  }

  /**
   * 获取当前天气
   */
  getWeather = async () => {
    let { dayPictureUrl, weather } = await reqWeather()
    this.setState({ dayPictureUrl, weather })
  }

  /**
   * 每隔一秒请求一次留言板+装修咨询信息
   */
  getMessageBoard = () => {
    setInterval(async () => {
      let results = await Promise.all([
        await reqGetMessageBoardUnreadCount(),
        await reqGetAskUnreadCount(),
      ])
      const data = getReqData(results[0])
      if (!data) return false

      const dataAsk = getReqData(results[1])
      if (!dataAsk) return false

      const { count, askCount } = this.state
      if (count === data.count || askCount === dataAsk.count) return false

      this.setState({ count: data.count, askCount: dataAsk.count })
    }, 5000)
  }

  /**
   * 退出登录
   */
  customLogout = () => {
    confirm({
      title: '退出登录',
      content: '您真的要退出登录吗',
      onOk: () => {
        this.props.logout()
        this.props.history.replace('/login')
      },
    })
  }

  /*
   * 第一次render之后执行一次
   * 一般执行异步操作
   * 发送ajax请求/jsonp请求/启动定时器。
   * */
  componentDidMount() {
    // 获取当前时间
    // this.getTime();
    // 获取当前天气
    // this.getWeather();
    // 获取title
    // this.getTitle();
    // 订阅留言板
    // this.getMessageBoard();
    // console.log(this.props.user);
  }

  render() {
    const { currentTime, dayPictureUrl, weather, count, askCount } = this.state

    return (
      <div className="header">
        <div className="header-top">
          <span>欢迎 {this.props.user.data.username}</span>
          <LinkButton onClick={this.customLogout}>退出</LinkButton>
        </div>
        <div className="header-bottom">
          <div className="header-bottom-left">{this.props.headTitle}</div>
          {/* <div className="header-bottom-right">
            <Badge count={count} overflowCount={99}>
              {(count === 0 ? null : <Link to={"/message-board"}>留言板&nbsp;&nbsp;&nbsp;</Link>)}
            </Badge>

            <Badge count={askCount} overflowCount={99}>
              {(askCount === 0 ? null : <Link to={"/ask-list"}>&nbsp;&nbsp;&nbsp;&nbsp;装修咨询&nbsp;&nbsp;&nbsp;</Link>)}
            </Badge>
          </div> */}
        </div>
      </div>
    )
  }
}

export default connect(
  (state) => ({
    headTitle: state.headTitle,
    user: state.user,
  }), // 这里不用再声明propTypes了，只需要this.props.headTitle
  { logout }
)(withRouter(Index))
